<template>
  <div>
    <Category :scene="SpuStore.scene"></Category>
  </div>
  <div style="margin: 10px 0px">
    <el-card>
      <div v-show="SpuStore.scene == 0">
        <el-button type="primary" @click="addSpu" :disabled="!AttrStore.c3ID" v-has="'btn.Spu.add'">
          添加SPU
        </el-button>
        <el-table style="width: 100%; width: 100%; margin: 10px 0px" border :data="recordsSpu">
          <el-table-column label="序号" width="80px" align="center" type="index" />
          <el-table-column label="SPU名称" align="" prop="spuName"> </el-table-column>
          <!-- show-overflow-tooltip 可以让溢出的文字,在我们光标聚焦后出现提示框展示内容 -->
          <el-table-column label="SPU描述" align="" prop="description" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" align="">
            <template #="{ row }">
              <el-button
                type="primary"
                icon="Plus"
                size="small"
                title="添加SKU"
                @click="addSku(row)"
                v-has="'btn.Spu.addsku'"
              ></el-button>
              <el-button
                type="primary"
                icon="Edit"
                size="small"
                title="修改SPU"
                @click="updataSpu(row)"
                v-has="'btn.Spu.update'"
              ></el-button>
              <el-button
                type="primary"
                icon="View"
                size="small"
                title="查看SPU列表"
                @click="viewSpuList(row)"
                v-has="'btn.Spu.skus'"
              ></el-button>
              <el-button
                type="primary"
                icon="delete"
                size="small"
                title="删除SPU列表"
                @click="delSpuList(row)"
                v-has="'btn.Spu.delete'"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="getHasSpu"
          @size-change="getHasSpu"
          v-model:current-page="pageNo"
          v-model:page-size="limit"
          :page-sizes="[3, 5, 7, 9]"
          :background="true"
          layout="total, sizes, prev, pager,->, next, jumper"
          :total="total"
          :disabled="total == 0"
        />
      </div>
      <div v-show="SpuStore.scene == 1">
        <spuFrom ref="spu" @changUpDataHasSpu="changUpDataHasSpu"></spuFrom>
      </div>
      <div v-show="SpuStore.scene == 2">
        <skuFrom ref="sku" @changUpDataHasSpu="changUpDataHasSpu"></skuFrom>
      </div>
      <div>
        <el-dialog v-model="dialogVisible" title="SKU列表" :before-close="handleClose">
          <el-table style="width: 100%; width: 100%; margin: 10px 0px" border :data="skuListData">
            <el-table-column label="SKU名字" prop="skuName" />
            <el-table-column label="SKU价格" prop="price"> </el-table-column>
            <el-table-column label="SKU重量" prop="weight" show-overflow-tooltip></el-table-column>
            <el-table-column label="SKU图片" prop="">
              <template #="{ row }"> <img :src="row.skuDefaultImg" alt="" /> </template>
            </el-table-column>
          </el-table>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup name="SPU">
import { ref, watch } from 'vue'
import useAttrStore from '@/store/modules/useAttr'
import { reqDelSpuList, reqFindSpuIdHasSkuInfo, reqHasSpuData } from '@/API/product/spu'
import { Sku, SkuData, SpuRecord, SpuRecordData } from '@/API/product/spu/type'
import spuFrom from './spuFrom.vue'
import skuFrom from './skuFrom.vue'
import useSpuStore from '@/store/modules/useSpu'
let SpuStore = useSpuStore()
let AttrStore = useAttrStore()
let pageNo = ref<Number>(1)
/* 每一页展现多少数据? */
let limit = ref<Number>(3)
/* 当前页数 */
let total = ref<Number>(0)
// 记录Spu的数据
/* 获取两子组件实例spuFrom,skuFrom */
let spu = ref()
let sku = ref()
let recordsSpu = ref<SpuRecord>([])
let dialogVisible = ref(false)
let skuListData = ref<Sku>([])
watch(
  () => AttrStore.c3ID,
  () => {
    /* 防止bug,没有三级id的情况下也获取数据 */
    if (!AttrStore.c3ID) {
      return
    }
    getHasSpu()
  }
)

const getHasSpu = async (pager = 1) => {
  /* 修改当前页码 */
  pageNo.value = pager
  let result = await reqHasSpuData(pageNo.value, limit.value, AttrStore.c3ID)
  if (result.code == 200) {
    recordsSpu.value = result.data.records
    total.value = result.data.total
  } else {
    console.log(result.message)
  }
}
const addSpu = () => {
  spu.value.clearSpuParams(AttrStore.c3ID)
  SpuStore.scene = 1
  spu.value.upDataSpuData()
}
const updataSpu = (row: SpuRecordData) => {
  spu.value.clearSpuParams(AttrStore.c3ID)
  SpuStore.scene = 1
  spu.value.upDataSpuData(row)
}
const changUpDataHasSpu = (obj) => {
  if (obj.store == 'updata') {
    getHasSpu(pageNo.value)
  } else {
    getHasSpu()
  }
}
const addSku = (row: SpuRecordData) => {
  sku.value.getSkuData(AttrStore.c1ID, AttrStore.c2ID, row)
  SpuStore.scene = 2
}
const delSpuList = async (row: SpuRecordData) => {
  ElMessageBox.confirm('确定删除SPU数据吗?', '删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      let result = await reqDelSpuList(row.id)
      if (result.code == 200) {
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
        getHasSpu()
      } else {
        console.log(result.message)
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消'
      })
    })
}
const viewSpuList = async (row: SpuRecordData) => {
  let result = await reqFindSpuIdHasSkuInfo(row.id)
  if (result.code == 200) {
    skuListData.value = result.data
  } else {
    console.log(result.message)
  }
  dialogVisible.value = true
}
</script>

<style scoped></style>
